<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <form @submit.prevent="sub">
           <label for="d1">账号:</label> <input type="text" id="d1" v-model="userInfo.account"><br>
           <label for="d2">密码:</label> <input type="password" id="d2" v-model="userInfo.password"><br>

           <!-- 单选框写上name表示一组，写上value表示值，不然v-model拿不到值 -->
           性别:男<input type="radio" name="sex" value="male" v-model="userInfo.sex">  女: <input type="radio" name="sex" value="female" v-model="userInfo.sex"><br>

           <!-- 多选框你不给value，勾选v-model就会得到checked值，也就是是否勾选的值 -->
           爱好:
           学习 <input type="checkbox" value="study" v-model="userInfo.hobby">
           吃饭 <input type="checkbox" value="eat" v-model="userInfo.hobby">
           睡觉 <input type="checkbox" value="sleep" v-model="userInfo.hobby"><br>



           所属校区
           <select v-model="userInfo.city">
               <option value="">选择小区</option>
               <option value="bj">北京</option>
               <option value="sh">上海</option>
               <option value="sz">深圳</option>

           </select><br>

           
           其他信息:
           <textarea name="" id="" cols="30" rows="10" v-model="userInfo.otherInfo"></textarea><br>

           阅读并接受用户协议: <input type="checkbox" v-model="userInfo.agree"> <a href="javascript:;">用户协议</a><br>

           <!-- 一点按钮就刷新了，因为触发了表单提交事件，我们给表单绑定一个提交事件,阻止默认行为 -->
            <button>提交用户信息</button>
       </form>
    </div>

    <!-- v-model也有修饰符，比如v-model.number，把你写的东西收集成数字，防止类型不对 -->
    <!-- 还有lazy修饰符，等你输入完了才收集，不然会实时收集 -->
    <!-- 还有修饰符trim，去掉前后空格 -->
</body>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
           userInfo:{
               account:'',
               password:'',
               sex:'',
               hobby:[],
               city:'',
               otherInfo:'',
               agree:false,

           }
        },
        methods: {
            sub(){
                console.log(this.userInfo)
            }
        },
    })
</script>
</html>